import React, {Component} from 'react';
import './index.css';
import PropTypes from 'prop-types';

export default class Index extends Component {

  static propTypes = {
    updateTodo: PropTypes.func.isRequired,
    deleteTodo: PropTypes.func.isRequired,
  }

  state = {binStatus: false}

  handleChecked = (id) => {
    return (event) => {
      this.props.updateTodo(id, event.target.checked);
    }
  }

  remove = (id) => {
    return (event) => {
      this.props.deleteTodo(id);
    }
  }

  mouseOver = (event) => {
    this.setState({binStatus: true});
  }
  mouseLeave = (event) => {
    this.setState({binStatus: false});
  }

  render() {
    const {id,name,checked} = this.props;
    return (
        <li key={id} onMouseOver={this.mouseOver} onMouseLeave={this.mouseLeave}>
          <label>
            <input type="checkbox"
                   onChange={this.handleChecked(id)}
                   checked={checked}/>
            <span>{name}</span>
          </label>
          <button onClick={this.remove(id)} style={{display:this.state.binStatus?'block':'none'}}
                  className="btn btn-danger">删除
          </button>
        </li>
    );
  }
}
